<%@page language="java" contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<title>custom-toolbar</title>
	<meta charset="utf-8">
	<style>
        .w70 {width: 70px !important;}
        .table {
        	padding:10px;
        }
    </style>
    <%@include file="/common/table.jsp"%>
</head>
<body>
	<div class="table">
	    <div id="toolbar">
	        <div class="form-inline" role="form">
	            <div class="form-group">
	                <span>Offset: </span>
	                <input name="offset" class="form-control w70" type="number" value="0">
	            </div>
	            <div class="form-group">
	                <span>Limit: </span>
	                <input name="limit" class="form-control w70" type="number" value="5">
	            </div>
	            <div class="form-group">
	                <input name="search" class="form-control" type="text" placeholder="Search">
	            </div>
	            <button type="submit" class="btn btn-default ok">查询</button>
	            <button type="submit" class="btn btn-info add">新增</button>
	            <button type="submit" class="btn btn-danger del">删除</button>
	            <button type="submit" class="btn btn-warning edit">修改</button>
	        </div>
	    </div>
	    <table id="table"
	           data-toggle="table"
	           data-toolbar="#toolbar"
	           data-show-refresh="true"
	           data-show-toggle="true"
	           data-show-columns="true"
	           data-query-params="queryParams"
	           data-response-handler="responseHandler"
	           data-url="${ctx }/sys/systuser/list.do">
	        <thead>
	        <tr>
	            <th data-field="vcUsername">用户名</th>
	            <th data-field="vcName">用户姓名</th>
	            <th data-field="vcPhone">手机号</th>
	        </tr>
	        </thead>
	    </table>
	</div>

<script>

	var $table = $('#table'), $ok = $('.btn.btn-default.ok')
		, $add = $('.btn.btn-info.add'), $del = $('.btn.btn-danger.del')
		, $edit = $('.btn.btn-warning.edit');

	$(function() {
		$ok.click(function() {
			$table.bootstrapTable('refresh');
		});
		
		$add.bind('click', add);
	});

	function queryParams() {
		var params = {};
		$('#toolbar').find('input[name]').each(function() {
			params[$(this).attr('name')] = $(this).val();
		});
		return params;
	}

	function responseHandler(res) {
		return res;
	}
	
	function add(){
		
	}
	
	function open(){
		layer.open({
			type: 2 //此处以iframe举例
			,title: ''
			,area: ['90%', '90%']
			,shade: 0
			,maxmin: true
			,content: '${ctx }/main/list.do'
			,btn: ['保存', '关闭']
			,yes: function(){
				$(that).click(); //此处只是为了演示，实际使用可以剔除
			}
			,btn2: function(){
				layer.closeAll();
			}
			,zIndex: layer.zIndex //重点1
			,success: function(layero){
				layer.setTop(layero); //重点2
			}
		});
	}
	
</script>
</body>
</html>